<script setup lang="ts">
    import { Swiper, SwiperSlide, useSwiper } from "swiper/vue";
    import { Pagination, Navigation, Autoplay, EffectFade } from "swiper";
    import "swiper/css";
    import "swiper/css/navigation";
    import "swiper/css/pagination";
    import "swiper/css/effect-fade";
    import { ref, computed, onMounted } from "vue";

    interface Props {
        type?: "banner" | "carousel"; // banner轮播图模式 | carousel走马灯模式
        navigation?: boolean; // 是否显示导航
        showPagination?: boolean; // 是否显示分页
        isAutoPlay?: boolean; // 是否自动轮播
        isLoop?: boolean; // 是否循环轮播
        delay?: number; // 自动切换的时间间隔（type: banner时生效），单位ms
        swipe?: boolean; // 是否可以鼠标拖动
        preloaderColor?: "theme" | "white" | "black"; // 预加载时的loading颜色
    }

    const props = withDefaults(defineProps<Props>(), {
        width: "100%",
        height: "100%",
        type: "banner", // 可选 banner | carousel
        navigation: false,
        showPagination: false,
        isAutoPlay: true,
        delay: 2000,
        isLoop: true,
        swipe: true,
        preloaderColor: "theme" // 可选 theme white black
    });

    const modulesBanner = ref([Navigation, Pagination, Autoplay, EffectFade]);
    const pagination = ref({
        dynamicBullets: true,
        clickable: true
    });
    const autoplayBanner = ref({
        delay: props.delay,
        disableOnInteraction: false, // 用户操作swiper之后，是否禁止autoplay。默认为true：停止。
        pauseOnMouseEnter: true // 鼠标置于swiper时暂停自动切换，鼠标离开时恢复自动切换，默认false
    });

    const modulesCarousel = ref([Autoplay]);
    const autoplayCarousel = ref<object | boolean>({
        delay: 0,
        disableOnInteraction: false
    });

    function onSwiper(swiper: any) {
        // console.log(swiper)
        if (props.type === "carousel") {
            swiper.el.onmouseenter = () => {
                // 移入暂停
                swiper.autoplay.stop();
            };
            swiper.el.onmouseleave = () => {
                // 移出启动
                swiper.autoplay.start();
            };
        }
    }

    // 为什么获取不到实例？？
    const swiperInstance = useSwiper(); // undefined

    const emit = defineEmits(["slideChange"]);
    const onSlideChange = (swiper: typeof swiperInstance.value) => {
        emit("slideChange", swiper.activeIndex);
    };

    // 暴露 swiper 实例
    defineExpose({
        swiperInstance
    });
</script>
<template>
    <Swiper
        :centeredSlides="true"
        :class="{ swiper: true, 'swiper-no-swiping': !swipe }"
        v-if="type === 'banner'"
        :modules="modulesBanner"
        :lazy="true"
        :navigation="navigation"
        :pagination="showPagination ? pagination : false"
        :slides-per-view="1"
        :autoplay="isAutoPlay ? autoplayBanner : false"
        :loop="isLoop"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        v-bind="$attrs">
        <slot>
            <swiper-slide v-for="(item, index) in 4" :key="index">
                <div style="height: 100px">{{ item }}</div>
                <div class="swiper-lazy-preloader"></div>
            </swiper-slide>
        </slot>
    </Swiper>
    <Swiper
        class="swiper-no-swiping"
        v-if="type === 'carousel'"
        :modules="modulesCarousel"
        :lazy="true"
        :autoplay="autoplayCarousel"
        :loop="isLoop"
        :speed="2500"
        @swiper="onSwiper"
        @slideChange="onSlideChange"
        v-bind="$attrs">
        <slot>
            <swiper-slide v-for="(item, index) in 4" :key="index">
                <div style="height: 100px">{{ item }}</div>
                <div class="swiper-lazy-preloader"></div>
            </swiper-slide>
        </slot>
    </Swiper>
</template>
<style scoped>
    /*// 自动切换过渡效果设置*/
    :deep(.swiper-wrapper) {
        /*// 线性过渡模拟走马灯效果*/
        transition-timing-function: linear;
        -webkit-transition-timing-function: linear;
    }

    :deep(.swiper-pagination-bullet) {
        width: 12px;
        height: 12px;
    }

    .swiper {
        height: 100%;
    }
</style>
